<template>
  <div class="container-component">
    <div v-if="$slots.header || $slots.toolbar" ref="header" class="header">
      <div v-if="$slots.header" class="search">
        <div ref="searchContent" class="search-content">
          <slot name="header" />
        </div>
      </div>

      <div v-if="$slots.toolbar" class="toolbar" :style="{ marginTop: $slots.header ? 10 : 0 }">
        <slot name="toolbar" />
      </div>
    </div>

    <div
      class="content"
      :style="{
        height: `calc(100% - ${
          $slots.header || $slots.toolbar ? headerHeight : 0
        }px - ${$slots.footer ? 65 : 0}px - ${extraHeight}px)`,
      }"
    >
      <template v-if="contentScroll">
        <el-scrollbar
          wrap-class="scrollbar-wrapper"
          class="container-component-scrollbar"
        >
          <slot />
        </el-scrollbar>
      </template>

      <template v-else>
        <slot />
      </template>
    </div>

    <div v-if="$slots.footer" class="footer" :class="{ shadow: footerShadow }">
      <slot name="footer" />
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({
  contentScroll: {
    type: Boolean,
    default: false
  },
  extraHeight: {
    type: Number,
    default: 0
  },
  footerShadow: {
    type: Boolean,
    default: false
  }
});

const headerHeight = ref(0);
const resizeHeader = ref<ResizeObserver | null>(null);
const header = ref<HTMLElement | null>(null);

const headerResize = () => {
  if (unref(header)) {
    resizeHeader.value = new ResizeObserver((event) => {
      if (event.length > 0 && event[0]?.target) {
        headerHeight.value = (event[0].target as HTMLElement).clientHeight;
      }
    });

    resizeHeader.value.observe(unref(header as any));
  }
};

onMounted(() => {
  headerResize();
});

onBeforeUnmount(() => {
  if (unref(resizeHeader) && unref(header)) {
    unref(resizeHeader as any).unobserve(unref(header) as any);
  }
});
</script>

<style scoped lang="scss">
.container-component {
  width: 100%;
  // height: 100%;
  height: calc(100vh - 48px);
  border-radius: 5px;
  position: relative;

  .header {
    width: 100%;
    padding: 10px;

    .search {
      width: 100%;
      // height: 30px;
      // overflow: hidden;
      position: relative;

      &-content {
        display: block;
        width: 100%;
        // margin-right: -10px;
        // margin-bottom: -10px;
      }
    }

    .toolbar {
      width: 100%;
      margin-top: 10px;
    }
  }

  .content {
    width: 100%;
    // padding-left: 10px;
    // padding-right: 10px;

    .container-component-scrollbar {
      width: 100%;
      height: 100%;
    }
  }

  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 65px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #ffffff;
    position: relative;
    z-index: 10;

    &.shadow {
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    }
  }
}
</style>
